<template>
	<view class="uni-margin-wrap">
		<!-- 音乐播放器 -->
		<PlayMusic></PlayMusic>
		<swiper class="swiper" :style="{ height: swiperHeight + 'px' }"   :interval="interval" :duration="duration" :current="currentIndex"   @change="changeSwiper" ref="mySwiper">
			<AllSongs></AllSongs>
			<PlayLists></PlayLists> 
			<Albums></Albums>
			<Artists></Artists>
			<Genres></Genres>
		</swiper>
		
	</view>
</template>

<script>
	import AllSongs from "./swaperView/allSongs.vue"
	import PlayMusic from "./swaperView/playMusic.vue"
	import PlayLists from "./swaperView/playLists.vue"
	import Albums from "./swaperView/albums.vue"
	import Artists from "./swaperView/artists.vue"
	import Genres from "./swaperView/genres.vue"
	export default {
		props:['currentIndex'],
		components: {
			AllSongs,
			PlayMusic,
			PlayLists,
			Albums,
			Artists,
			Genres
		},
		data() {
			return {
				//滑块的高度(单位px)
				swiperHeight: 0,
				//列表数据
				dataList: [],
				interval:2000,
				duration:500
			}
		},
		
		mounted() {
			 // 将当前索引设置为第二页，即索引为1
			//  this.$refs.mySwiper.setcurrent(this.currentIndex);
			console.log(this.$refs.mySwiper)
			this.setSwiperHeight();
		},
		watch: {
          currentIndex(newIndex, oldIndex) {
            // 当 currentIndex 发生变化时会执行这里的代码
           console.log('currentIndex 发生变化:', newIndex);
            // 立刻计算高度
		    this.$nextTick(() => {
					this.setSwiperHeight();
			});
			// 在这里可以添加其他需要执行的操作立即切换轮播图

         }
        },

		methods: {
			//手动切换题目
			changeSwiper(e) {
				this.$emit('currentChange', e.detail.current);
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				console.log(this.currentIndex)
				let element = `#content-wrap${this.currentIndex}`;
				console.log(element)
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
				window.scrollTo(0, 0);
			},
		},

	}
</script>
<style>
	.swiper {
		width: 100%;
		height: 1000rpx;
		margin: 0 auto;
		/* background-color: blue; */
	}

	.swiper-item {
		display: block;
		text-align: center;
	}
</style>